<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>动态轨迹</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="proj4,mapv" src="./static/libs/include-leaflet-local.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([30.398428, 114.321317], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' +
      'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw', {
        attribution: '<a href="#">MapGIS</a>',
        maxZoom: 18,
        id: 'mapbox.dark'
      }).addTo(map);

    $.get('../../static/data/mapv/wuhan-car', function (rs) {
      var data = [];
      var timeData = [];
      rs = rs.split("\n");
      var maxLength = 0;
      for (var i = 0; i < rs.length; i++) {
        var item = rs[i].split(',');
        var coordinates = [];
        if (item.length > maxLength) {
          maxLength = item.length;
        }
        for (j = 0; j < item.length; j += 2) {
          if (item.length === 1) {
            continue;
          }
          coordinates.push(proj4('EPSG:3857', 'EPSG:4326', [item[j], item[j + 1]]));
          timeData.push({
            geometry: {
              type: 'Point',
              coordinates: proj4('EPSG:3857', 'EPSG:4326', [item[j], item[j + 1]])
            },
            count: 1,
            time: j
          });
        }
        data.push({
          geometry: {
            type: 'LineString',
            coordinates: coordinates
          }
        });

      }

      var dataSet1 = new mapv.DataSet(data);

      var options = {
        strokeStyle: 'rgba(53,57,255,0.5)',
        coordType: 'bd09mc',
        // globalCompositeOperation: 'lighter',
        shadowColor: 'rgba(53,57,255,0.2)',
        shadowBlur: 3,
        lineWidth: 3.0,
        draw: 'simple'
      };

      new L.zondy.MapvLayer(map, dataSet1, options).addTo(map);


      var dataSet2 = new mapv.DataSet(timeData);

      var options = {
        fillStyle: 'rgba(255, 250, 250, 0.2)',
        coordType: 'bd09mc',
        globalCompositeOperation: "lighter",
        size: 1.5,
        animation: {
          stepsRange: {
            start: 0,
            end: 100
          },
          trails: 3,
          duration: 5,
        },
        draw: 'simple'
      };

      new L.zondy.MapvLayer(map, dataSet2, options).addTo(map);
    });
  </script>


</body>

</html>